<template>
  <div class="page-grey">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span class="center">直属下线</span>
    </div>
    <van-tabs v-model="active" swipeable title-active-color="#eb7875">
      <van-tab v-for="tab in tabs" :key="tab.id" :title="tab.title">
        <div class="box">
          <dl>
            <dd>直推</dd>
            <dd>团队</dd>
          </dl>
          <dl>
            <dd>0</dd>
            <dd>0</dd>
          </dl>
          <dl>
            <dd>充值</dd>
            <dd>提现</dd>
          </dl>
          <dl>
            <dd>0.00</dd>
            <dd>0.00</dd>
          </dl>
        </div>
        <v-list v-if="tab.id != 1" :generation="active" />
        <v-empty v-else />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import vList from "./components/List";
import vEmpty from "./components/Empty";
export default {
  data() {
    return {
      active: 0,
      tabs: [
        { id: 1, name: "first", title: "一代" },
        { id: 2, name: "second", title: "二代" },
        { id: 3, name: "third", title: "三代" }
      ],
      list: []
    };
  },
  components: {
    vList,
    vEmpty
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 90%;
  padding: 15px;
  margin: 15px auto;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #eb7875;
  line-height: 2;
  color: #fff;
  dl {
    display: flex;
    &:nth-child(2) {
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #fff;
    }
    dd {
      flex: 1;
    }
  }
}
</style>
